<template>
  <div id="trendChartId"></div>
</template>
<script setup lang="ts">
  import * as echarts from 'echarts'
  import { COLOR_ARR } from '@/utils/constants/common'

  const props = defineProps({
    valueData: {
      type: Array,
      default: () => []
    },
    labelData: {
      type: Array,
      default: () => []
    }
  })

  watch(
    () => props.valueData,
    (value) => {
      //   this.valueData = value
      console.log(111111111, value)
      nextTick(() => {
        handleSetVisitChart()
      })
    },
    { immediate: true, deep: true }
  )

  const chartDom = ref()
  const handleSetVisitChart = () => {
    chartDom.value = echarts.init(document.getElementById('trendChartId'))
    let option = {
      color: COLOR_ARR,
      // tooltip: {
      //   trigger: 'axis',
      //   axisPointer: {
      //     lineStyle: {
      //       color: '#57617B'
      //     }
      //   }
      // },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(0, 255, 233,0)'
                },
                {
                  offset: 0.5,
                  color: 'rgba(255, 255, 255,1)'
                },
                {
                  offset: 1,
                  color: 'rgba(0, 255, 233,0)'
                }
              ],
              global: false
            }
          }
        }
      },
      legend: {
        data: props.labelData,
        tooltip: {
          show: true
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '4%',
        containLabel: true
      },
      toolbox: {
        right: '40',
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'time',
        boundaryGap: false,
        snap: true
      },
      yAxis: [
        {
          type: 'value',
          name: '千锭时断头',
          position: 'left',
          offset: 0,
          alignTicks: true,
          splitNumber: 5,
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#fff'],
              opacity: 0.06
            }
          },
          // axisLine: {
          //   show: true,
          //   lineStyle: {
          //     color: '#ea5f6b',
          //   },
          // },
          axisLabel: {
            formatter: '{value}',
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          }
        },
        {
          type: 'value',
          name: '纺纱长度',
          position: 'right',
          alignTicks: true,
          splitNumber: 5,
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#676666'],
              opacity: 0.06
            }
          },
          // axisLine: {
          //   show: true,
          //   lineStyle: {
          //     color: '#2f76e0',
          //   },
          // },
          axisLabel: {
            formatter: '{value}',
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          }
        }
      ],
      series: props.valueData
    }
    chartDom.value.clear()
    chartDom.value.setOption(option, true)
    window.addEventListener('resize', function () {
      chartDom.value.resize()
    })
  }
</script>
<style scoped lang="scss">
  #trendChartId {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
</style>
